<template>
  <div>
    <el-card>
      <h2>账号信息</h2>
      <el-form :model="ruleForm" :rules="rules" ref="formBusiness">
        <!-- 账号名 -->
        <el-form-item label="账号名" label-width="120px" prop="account">
          <el-input v-model="ruleForm.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注" label-width="120px" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入备注"></el-input>
        </el-form-item>
				
        <!-- 所属角色 -->	
	<el-form-item class="tab_list" label="所属角色" label-width="120px">
	  <div @click="handleTab(index,item.id)" :class="['tabs',{ active: subroleIndex==index }]" v-for="(item,index)  in subroles" :key="item.id">{{item.name}}</div>
	</el-form-item>
	<!-- 获取parentId -->
	<!-- <el-form-item label="选择" label-width="120px">
	  <template>
	    <el-select v-model="value" placeholder="请选择">
	      <el-option
	        v-for="item in substaffs"
	        :key="item.id"
	        :label="item.name"
	        :value="item.id">
	      </el-option>
	    </el-select>
	  </template>
	</el-form-item> -->
      </el-form>
      <!-- 提交 -->
      <el-button @click="subimt" class="subimt" type="primary">提交</el-button>
    </el-card>
  </div>
</template>

<script>
import { saveStaff,getRoleByStaffId,getStaffByStaffId } from "../api/index";
export default {
  data() {
    return {
      // 数据源
      ruleForm: {
        id:0,
        roleId:"",
        parentId: "",
        account: "",
        name:""
      },
      subroles:[],
      subroleIndex:0,
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入备注", trigger: "blur" }],
	roleId: [{ required: true, message: "请选择所属角色", trigger: "blur" }]
      },
      substaffs:[],
      value:"",
      staff:{}
    };
  },
  computed: {
    
  },
  created() {
     this.getCommodity()
     this.getGoods()
  },
  methods: {
    // 获取列表
    async getGoods() {	    
      const res = await getStaffByStaffId();
      console.log(res.data.staff.substaffs+'22')
      if(res.code !==200)return this.$message.error("获取账号列表失败")
      //this.$message.success("获取账号列表成功")
      this.substaffs = res.data.staff.substaffs;      
      this.staff = res.data.staff;
    },
    // 选择角色
    handleTab(index,id){
      this.subroleIndex = index;
      this.ruleForm.roleId=id;
    },
    // 获取角色
    async getCommodity() {
      const res = await getRoleByStaffId();
      if(res.code !==200)return this.$message.error("获取会员列表失败")
      this.subroles = res.data.role.subroles;  
    },
    // 提交
    subimt() {
      this.$refs.formBusiness.validate(async valid => {
        if(this.value==''){
            this.ruleForm.parentId=this.staff.id
        }else{
           this.ruleForm.parentId=this.value 
	}
	if (!valid) return;
	let {account,name,roleId}=this.ruleForm
	if(!account) return this.$message.error("请输入账号")
	if(!name) return this.$message.error("请输入备注")
	if(!roleId) return this.$message.error("请选择所属角色")
	let staffid=JSON.parse(window.sessionStorage.getItem("user")).id
	const res = await saveStaff({ ...this.ruleForm });
	if(res.code !== 200)return this.$message.error("提交失败")
	this.$message.success("提交成功")
	this.ruleForm.account=""
	this.ruleForm.name=""
	this.$router.push("/queryStaff")
      });
    }
  }
};
</script>

<style scoped>
.tabs{	
	width: 140px;
	border: 1px solid #E9EAEC;
	text-align: center;
	border-radius: 4px;
	margin-right:20px ;
	margin-bottom: 20px;
	display: inline-block;
}
.tabs.active{
	border-color: red;
}
h3 {
  margin-bottom: 30px;
}
h2 {
  margin-bottom: 20px;
}
.subimt {
  width: 200px;
  margin-top: 100px;
  margin: 30px 0 0 120px;
}
</style>
